<template>
  <div class="main_con">
    <div style="text-align: left;margin-bottom: 10px">
      <H2>日期属性</H2>
    </div>
    <el-date-picker
        class="ml-5"
        v-model="selectedDate"
        type="month"
        @change="dateChangeHandler"
        value-format="yyyy-MM"
        format="yyyy-MM"
        placeholder="请选择月份">
    </el-date-picker>

    <el-calendar v-model="selectedDate" @click="dateChangeHandler">
      <template slot="dateCell" slot-scope="{date, data}">
        <div style="display: flex;justify-content: center">
          <div style="margin-right: 5px">
            {{ data.day.split('-').slice(1).join('-') }}
          </div>
        </div>
        <div v-if="tableData" style="width:100%;display: flex;flex-direction: column;align-items: center" v-for="(item,index) in tableData" :key="index">
          <!-- 先渲染上午和下午 -->
          <el-tag style="margin-top: 6px;margin-bottom: 10px" :type="(item.dayTypeId>1 && item.dayTypeId < 7) ? 'primary' : 'danger' " v-if="item.date === data.day">
            {{ item.dayTypeName }}
          </el-tag>
          <el-button round type="primary" @click="dayClickHandler(item)" v-if="item.date === data.day">修改标签 <i class="el-icon-edit"></i></el-button>
        </div>
      </template>
    </el-calendar>
    <el-dialog :title="form.date+'   '+form.dayTypeName" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false">
      <el-form label-width="120px" size="small" style="width: 80%; margin: 0 auto">
        <el-form-item label="">
          <el-input disabled v-model="form.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="form.dayTypeId" placeholder="请选择标签">
            <el-option
                v-for="item in dayTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
  name: "Day",
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      name: "",
      form: {},
      dialogFormVisible: false,
      multipleSelection: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      uploadHeaders: {"token": localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).token : ''},
      date: '',
      dayTypeName: '',
      selectedDate:dayjs().format('YYYY-MM'),
      dayTypeList:[]
    }
  },
  created() {
    this.load()
    this.getDayTypeList()
  },
  methods: {
    getDayTypeList(){
      this.request.get("/dayType").then(res => {
        this.dayTypeList = res.data
      })
    },
    dayClickHandler(item){
      this.form = JSON.parse(JSON.stringify(item))
      this.dialogFormVisible = true
    },
    getDateData(date){
      return  this.tableData.find(item => item.date === date)?.dayTypeName || null
    },
    dateChangeHandler(){
      this.load()
    },
    load() {
      this.request.get("/day/page", {
        params: {
          date:this.selectedDate
        }
      }).then(res => {
        this.tableData = res.data
      })
    },
    reset() {
      this.pageNum = 1
      this.pageSize = 10
      this.name = ""
      this.load()
    },
    save() {
      this.request.post("/day", this.form).then(res => {
        if (res.code === '0') {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
      this.$nextTick(() => {
        if (this.$refs.img) {
          this.$refs.img.clearFiles();
        }
        if (this.$refs.file) {
          this.$refs.file.clearFiles();
        }
      })
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
      this.$nextTick(() => {
        if (this.$refs.img) {
          this.$refs.img.clearFiles();
        }
        if (this.$refs.file) {
          this.$refs.file.clearFiles();
        }
      })
    },
    handleFileUploadSuccess(res) {
      this.form.file = res
    },
    handleImgUploadSuccess(res) {
      this.form.img = res
    },
    del(id) {
      this.request.delete("/day/" + id).then(res => {
        if (res.code === '0') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      if (!this.multipleSelection.length) {
        this.$message.error("请选择需要删除的数据")
        return
      }
      let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
      this.request.post("/day/del/batch", ids).then(res => {
        if (res.code === '0') {
          this.$message.success("批量删除成功")
          this.load()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    download(url) {
      window.open(url)
    },
    query() {
      this.pageNum = 1
      this.load()
    },
  }
}
</script>


<style scoped>
.headerBg {
  background: #eee !important;
}
/deep/ .el-calendar-day  {
  box-sizing: border-box;
  padding: 5px;
  height: 110px;
}
/deep/ .el-button-group{
  display: none;
}
</style>
